<template>
    <div>
        <div class="title">
            <h3>最新比赛</h3>
        </div>
        <div style="width:98%;margin:0px auto">
              <el-table
                :data="all"
                border
                size="small"
                style="width: 100%">
                <el-table-column prop="cname" label="比赛名称" ></el-table-column>
                <el-table-column prop="startTime" label="开始时间" ></el-table-column>
                <el-table-column prop="endTime" label="结束时间" ></el-table-column>
                <el-table-column prop="note" label="备注"></el-table-column>
                <el-table-column label="参加比赛" width="90">
                    <template slot-scope="scope">
                        <el-button type="warning" @click="dialogVisible(scope.$index, scope.row)">参加</el-button>

                        <el-dialog title="项目填写" :visible.sync="dialogFormVisible">
                            <el-form v-model="roudata">
                                <el-form-item label="比赛名称:" :label-width="formLabelWidth">
                                <el-input v-model="competition.cname" :disabled="true"></el-input>
                                </el-form-item>

                                <el-form-item label="开始时间:" :label-width="formLabelWidth">
                                <el-input v-model="competition.startTime" :disabled="true"></el-input>
                                </el-form-item>

                                <el-form-item label="结束时间:" :label-width="formLabelWidth">
                                <el-input v-model="competition.endTime" :disabled="true"></el-input>
                                </el-form-item>
                                
                                <el-form-item label="项目名称:" :label-width="formLabelWidth">
                                <el-input v-model="roudata.cname" placeholder="请输入你自己项目名称" autocomplete="off"></el-input>
                                </el-form-item>
                                
                                <el-form-item  label="指导老师ID:" :label-width="formLabelWidth">
                                <el-input v-model="roudata.teacherSid" placeholder="请输入指导老师的ID" autocomplete="off"></el-input>
                                </el-form-item>

                                <el-form-item label="上传项目申报书:" :label-width="formLabelWidth">
                                    <el-upload
                                        :auto-upload="false"
                                        ref="upload"
                                        :limit=1
                                        :on-success="handleSuccess"
                                        accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                        action="http://210.41.45.4/jxfl/upload/upload"
                                    >
                                        <el-button slot="trigger">选择文件</el-button>
                                        <el-button style="margin-left: 10px;" type="primary" @click="submitUpload">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer"> 
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="addProject(roudata)">确 定</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-table-column>
                
            </el-table>
            <el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currpage"
				:page-sizes="[15, 35, 50, 100]"
				:page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="count">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { Loading, Message,Notification  } from 'element-ui'
import {mapState} from 'vuex'
    export default {
        data() {
            return {
                competition:{},
                fileList:[],
                filename:'',
                pagesize:15,
                currpage:1,
                formLabelWidth:'120px',
                all: [],
                dialogFormVisible:false,
                roudata:{
                    competitionSid:'',
                    cname:'',
                    teacherSid:'',
                }
            }
        },
         methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagesize = val
                this.$store.dispatch('getAllCompetition',{page:this.currpage,size:this.pagesize})
            },
            handleCurrentChange(val) {
                console.log(` ${val} `);
                this.currpage = val
                this.$store.dispatch('getAllCompetition',{page:this.currpage,size:this.pagesize})
            },
            //参加比赛
            addProject(data){
            // console.log(data)
            if (this.roudata.cname != '' && this.roudata.teacherSid !=''){
                if( JSON.stringify(this.file) !='{}'){
                    if(/^\d+$/.test(this.roudata.teacherSid)){
                        this.dialogFormVisible = false
                        this.$store.dispatch('addProject',data)
                    }else{
                        console.log(/^\d+$/.test(this.roudata.teacherSid))
                        Message.warning('老师的ID必须是数字');
                        this.roudata.teacherSid=''
                        // console.log(this.projectSid)
                    }
                }else{
                    Message.warning('请上传项目申请书');
                }
            }else{
                Message.warning('项目目录和指导老师ID不能为空');
            }
			
            },
            dialogVisible(index, row){
                this.competition.cname = row.cname
                this.competition.startTime = row.startTime
                this.competition.endTime = row.endTime
                this.roudata.competitionSid = row.sid
                this.dialogFormVisible = true
                // console.log(row)
            },
            //上传文件
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            //上传成功
            handleSuccess(response,file,fileList){
                console.log(file)
                this.$store.commit('setProject',file)
            },
        },
        computed:{
            ...mapState({
                'allCompetition':(state) => state.allCompetition.data,
                'count':(state) => state.allCompetition.count,
                'file':(state) => state.file,
            })
        },
        watch:{
            allCompetition:{
                handler: function (val, oldVal) {                 
                    this.all = val;  
                }
            }
        },
    }
</script>

<style lang="stylus" scoped>
.title{
    width: 90%
    margin: 20px 0px;
    padding: 10px;
    border-left: 5px solid #e95b3a
}
</style>